<template>
    <div>
        <a-table :columns="vColumns" :data-source="vData" bordered :scroll="{ x: 'auto' }">
            <template v-for="col in inputSlots" :slot="col.scopedSlots.customRender" slot-scope="text, record, index">
                <div :key="col.scopedSlots.customRender">
                    <a-input v-if="col.type == InputTypeEnum.TEXT" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col)" />
                    <template v-else>{{ text }}</template>
                </div>
            </template>
        </a-table>
    </div>
</template>
<script>
import { InputTypeEnum } from "@/appBase"

export default {
    name: 'InputTable',
    data() {
        return {
            title: "教师管理",
            InputTypeEnum,
            // 表头
            columns: [
                { title: "教师账号", dataIndex: "account", width: '150px', maxLength: 10, type: InputTypeEnum.TEXT },
                { title: "教师姓名", dataIndex: "name", width: '150px', maxLength: 10 },
                { title: "教师性别", dataIndex: "sexLabel", width: '100px' },
                { title: "手机号码", dataIndex: "phone", width: '150px' },
                { title: "排序", scopedSlots: { customRender: "move" }, width: '150px' },
                { title: "所在专业", dataIndex: "major", width: '150px' },
                { title: "教师状态", scopedSlots: { customRender: "status" }, width: '100px' },
                { title: "注册时间", dataIndex: "createdTime", width: '150px', format: true },
                { title: "功能列", scopedSlots: { customRender: "action" }, width: '100px', fixed: 'right' },
            ],
            // 加载数据方法 必须为 Promise 对象
            data: [
                { account: '帐号123', name: '名称', phone: '15123085381', sexLabel: '男' },
                { account: '帐号1231', name: '名称', phone: '15123085381', sexLabel: '男' }
            ]
        }
    },
    computed: {
        vData(){
            return [
                { account: '帐号123', name: '名称', phone: '15123085381', sexLabel: '男' },
                { account: '帐号1231', name: '名称', phone: '15123085381', sexLabel: '男' }
            ];
        },
        vColumns() {
            return this.columns.map(i => {
                const isBaseEdit = [
                    InputTypeEnum.TEXT,
                    InputTypeEnum.DATE_TIME,
                    InputTypeEnum.NUMBER,
                    InputTypeEnum.TEXTAREA
                ].includes(i.type);
                if (!i.scopedSlots && isBaseEdit) {
                    i.isBaseEdit = isBaseEdit;
                    i.scopedSlots = { customRender: i.dataIndex };
                }
                return i;
            });
        },
        inputSlots() {
            return this.columns.filter(i => i.isBaseEdit == true);
        }
    },
    methods: {
        handleChange(val, key, item) {
            console.log(val, key, item);
        }
    }
}

</script>
